<template>
  <a-select ref="select" v-model:value="sex" style="width: 100px">
    <a-select-option
      v-for="(item, idx) in sexOpts"
      :key="idx"
      :value="item.value"
      >{{ item.name }}</a-select-option
    >
  </a-select>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
  watch,
} from "vue";
import ResultEnum from "@/config/ResultEnum";
import { message } from "ant-design-vue";
import { copyObjVal } from "@/utils/common";
import { PlusOutlined } from "@ant-design/icons-vue";
import request from "@/request";

export default defineComponent({
  components: {
    PlusOutlined,
  },
  props: {
    version: {
      type: String,
    },
    sex: {
      type: String,
    },
  },
  setup(props, context) {
    watch(
      () => props.version,
      (newVal: any, oldVal: any) => {
        loadData();
      }
    );

    watch(
      () => {
        props.sex;
      },
      (newVal: any, oldVal: any) => {
        sex.value = newVal;
      }
    );

    const sex = ref("");
    const sexOpts = ref([] as any);

    const init = (val: string) => {
      sex.value = val;
    };

    const getData = () => {
      return sex.value;
    };

    onMounted(() => {
      loadData();
    });

    const loadData = () => {
      request({
        url: "/common/sex",
        method: "get",
      }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          sexOpts.value = res.result;
        } else {
          message.error(res.message);
        }
      });
    };

    return {
      init,
      getData,
      sex,
      sexOpts,
    };
  },
});
</script>
